<html>
<head>
   <meta charset="UTF-8" />
   <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="./js/jquery.min.js"></script>
   <script src="./js/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 600px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
       text: 'this is a test'   //设置整个图图表的标题
   };
   var subtitle = {
        text: 'this is a true test'  //为整个图标设置副标题
   };

   //配置在对称x轴显示的歌各项
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'7month', '八月', '九月', '十月', '十一月', '十二月'],
       // labels: ['color:red'];
   };
   var yAxis = {
      title: {
         text: 'Temperature (温度)'
      },
      //设置一条标示线
      plotLines: [{
         value: 1,
         width: 1,
         color: 'red',
         minorGridLineDashStyle :'solid',
         minorTickinterval :'auto'
      }]
    
   };   
   //设置提示信息
   var tooltip = {
      valueSuffix: '温度'
   };
  //设置展示方式
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 1
   };

   var series =  [
     
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>